<template>
  <!-- 头部 -->
  <!-- HomeInfo.getGoodsInfo.goods_detail_imgs -->
  <div>
    <van-icon @click="go" class="icon" name="arrow-left" />
    <van-nav-bar fixed :placeholder="!isTop" :class="{ opacity: isTop }">
      <template #title>
        <van-tabs style="width: 350px; max-width: 100%" @click-tab="changeTab" v-model:active="activeIndex">
          <van-tab class="qwe" title="商品" index="0"> </van-tab>
          <van-tab title="详情" index="1"> </van-tab>
          <van-tab title="评价" index="2"> </van-tab>
        </van-tabs>
      </template>
    </van-nav-bar>。
  </div>
  <!-- 详情 -->
  <div class="detail">
    <div>
      <div class="banner">
        <div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :width="414" :height="414">
            <van-swipe-item v-for="item in HomeInfo.getGoodsBanner"><img style="width: 100%; height: 100%" :src="item"
                alt="" /></van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="van-multi-ellipsis--l2">
        {{ HomeInfo.getGoodsInfo.name }}
      </div>
      <div class="detail-Price">
        <div class="Price-left">
          <div class="left">￥{{ HomeInfo.getskuList.market_price / 100 }}</div>
          <div class="right">
            会员价：￥{{ HomeInfo.getskuList.price / 100 }}
          </div>
        </div>
        <div class="Price-right">月销量3000件</div>
      </div>
    </div>
    <div class="illustrate">
      <van-cell title="运费" value="包邮" size="large" />
      <van-cell title="规格" is-link />
      <van-cell title="库存" value="1000件" size="large" />
    </div>
  </div>

  <!-- 详情 -->
  <div class="two" ref="details">
    <img :src="item" alt="" v-for="item in HomeInfo.goods_detail_imgs"></img>
  </div>
  <!-- 评论 -->
  <div class="detail" ref="evaldom">
    <div class="appraise-one">
      <div class="detail-Price">
        <div class="Price-left">
          <div class="left">
            <img src="../../imags/touxiang.png" alt="" />
          </div>
          <div class="right">
            <div class="Number">1*****9</div>
            <div>⭐⭐⭐⭐⭐</div>
          </div>
        </div>
        <div class="Price-right">2018-05-13 15:32</div>
      </div>
      <div class="van-multi-ellipsis--l4">
        我的柜子里有好多用到一半就搁置的洗发水，对于我这种一旦拥有新东西就必须先拆先感受的宝宝，昨晚马上就试了，护发素的味道那简直叫香气四溢，满屋子的香味！早上头发很顺滑！方圆一米之内萦绕香气！哈哈！
      </div>
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <img src="../../imags/101.png" alt="" />
        </van-grid-item>
        <van-grid-item>
          <img src="../../imags/102.png" alt="" />
        </van-grid-item>
        <van-grid-item>
          <img src="../../imags/103.png" alt="" />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="appraise-one">
      <div class="detail-Price">
        <div class="Price-left">
          <div class="left">
            <img src="../../imags/touxiang.png" alt="" />
          </div>
          <div class="right">
            <div class="Number">1*****9</div>
            <div>⭐⭐⭐⭐⭐</div>
          </div>
        </div>
        <div class="Price-right">2018-05-13 15:32</div>
      </div>
      <div class="van-multi-ellipsis--l4">
        我的柜子里有好多用到一半就搁置的洗发水，对于我这种一旦拥有新东西就必须先拆先感受的宝宝，昨晚马上就试了，护发素的味道那简直叫香气四溢，满屋子的香味！早上头发很顺滑！方圆一米之内萦绕香气！哈哈！
      </div>
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <img src="../../imags/101.png" alt="" />
        </van-grid-item>
        <van-grid-item>
          <img src="../../imags/102.png" alt="" />
        </van-grid-item>
        <van-grid-item>
          <img src="../../imags/103.png" alt="" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
  <div class="deta-button">
    <!-- <span>查看全部评价</span> -->
    <van-button plain hairline>查看全部评价</van-button>
  </div>
  <!-- 底部 -->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon icon="shop-o" text="店铺" />
    <van-action-bar-button type="warning" text="加入购物车" />
    <van-action-bar-button @click="showPopup" type="danger" text="立即购买" />
  </van-action-bar>
  <!--底部弹出层 -->
  <van-popup v-model:show="show" closeable close-icon="close" position="bottom"
    :style="{ height: '60%', overflow: 'visible' }">
    <div class="tcc">
      <div class="sp" style="display: flex; padding: 0 10px">
        <div class="sp-img">
          <img style="
                  width: 118px;
                  position: relative;
                  top: -20px;
                  z-index: 20010;
                  border-radius: 10px;
                " :src="HomeInfo.getGoodsInfo.goods_thumb" alt="" />
        </div>
        <div class="sp name" style="margin-left: 10px; margin-top: 10px">
          <div class="num" style="font-size: 18px; color: rgb(250, 138, 6)">
            ￥{{ activeSku.price / 100 * value }}
          </div>
          <div>库存{{ activeSku.stock }}件</div>
          <!-- <div>已选{{ selectSku[0] }} - {{ selectSku[1] }}</div> -->

        </div>
      </div>
      <div class="spec" style="
              padding: 10px 10px;
              border-bottom: 1px solid #ccc;
              border-top: 1px solid #ccc;
            ">
        <div style="margin-bottom: 10px">规格</div>
        <div v-for="item in HomeInfo.getGoodsInfo.spec_list">
          <button class="item" v-for="(item2, index2) in item.list" :class="{ red: item.active === index2 }"
            @click="item.active = index2">{{ item2.name }}</button>
        </div>
      </div>

      <div class="sp-num" style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 30px 10px;
            ">
        <div>购买数量</div>
        <van-stepper v-model="value" step="1" />
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-button @click="addCa" type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </van-popup>
</template>
<script setup>

import { ref, onMounted, reactive, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getGoodsInfo } from "@/api/index";
import { addCart } from "@/api/cart";
import { showToast } from "vant";
const router = useRouter();
const route = useRoute();
const go = () => history.back();
const activeName = ref("a");
const show = ref(false);
const price = ref();
const id = ref();
const isTop = ref(true); //  顶部
const details = ref(null); // 获取到页面上 ref叫detail的元素的引用
const evaldom = ref(null); // 获取到页面上 ref叫eval的元素的引用
const positionArr = ref([0]);
const activeIndex = ref(0); //  tabs栏默认的索引
const showPopup = () => {
  show.value = true;
};
const value = ref(1);
const HomeInfo = reactive({
  getGoodsInfo: [],
  getGoodsBanner: [],
  getskuList: [],
  goods_detail_imgs: []
});

let selectSku = computed(() => {
  let result = [];
  if (!HomeInfo.getGoodsInfo.spec_list) return [];
  HomeInfo.getGoodsInfo.spec_list.forEach((element) => {
    if (element.active != -1) {
      result.push(element.list[element.active].name);
    } else {
      result.push(null);
    }
  });
  return result;
});
//  当前选中的sku商品信息
let activeSku = computed(() => {
  if (selectSku.value.length === 0 || selectSku.value.includes(null)) return {};

  return HomeInfo.getGoodsInfo.sku_list.find((v) => {
    return selectSku.value.every((v2) => v.sku_name_arr.includes(v2));
  });
});


// 获取数据
function info() {
  getGoodsInfo({
    _id: route.query.id,
  }).then((res) => {
    // console.log(res);
    if (res.code == 0) {
      HomeInfo.getGoodsInfo = res.info;
      HomeInfo.getGoodsBanner = res.info.goods_banner_imgs;
      HomeInfo.getskuList = res.info.sku_list[0];
      HomeInfo.goods_detail_imgs = res.info.goods_detail_imgs;
      res.info.spec_list = res.info.spec_list.map((v) => {
        v.active = -1;
        return v;
      });
      console.log(res);
      setTimeout(() => {
        // console.log(details.value.offsetTop);
        positionArr.value.push(details.value.offsetTop)
        positionArr.value.push(evaldom.value.offsetTop)
        positionArr.value.push(Infinity);
      }, 2000)
    }
  });
}

function addCa() {
  if (!activeSku.value._id) {
    showToast("请先选择属性");
    return;
  }
  let { _id: sku_id, sku_name, image, price, stock, goods_id, goods_name, buy_num = 1 } = activeSku.value

  addCart({
    sku_id, sku_name, image, price, stock, goods_id, goods_name, buy_num,
    "action_checked": true,
  }).then((res) => {
    if (res.code == 0) {
      showToast({
        message: res.msg,
        icon: "success",
      });
      console.log(res);
    } else {
      showToast({
        message: res.msg,
        icon: "success",
      });
    }
  });
}
// 点击滑动
function changeTab(e) {
  console.log(e.name);
  // 设置滚动行为改为平滑的滚动
  window.scrollTo({
    top: positionArr.value[e.name],
    behavior: "smooth"
  });


}
// 页面挂载后加载
onMounted(() => {
  window.onscroll = function (e) {
    let top = document.documentElement.scrollTop;
    if (top >= 100) {
      isTop.value = false;
    } else {
      isTop.value = true;
    }
    for (let i = 0; i < positionArr.value.length - 1; i++) {
      let item = positionArr.value[i];
      //  大于当前的 但是比下一个小
      // 0  100  876 900  3000  无限大
      if (top >= item && top < positionArr.value[i + 1]) {
        activeIndex.value = i;
        break;
      }
    }
  }
  info();


});
</script>
<style>
.detail {
  padding: 0 10px;
}

.banner img {
  width: 100%;
}

.detail-Price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Price-left {
  display: flex;
  align-items: center;
}

.Price-right,
.Price-left .right {
  font-size: 12px;
  color: #666666;
}

.Price-left .left {
  margin-right: 10px;
  color: #fc6217;
}

.van-cell {
  margin-left: 0;
  margin-right: 0;
}

.Number {
  font-size: 20px;
}

.van-grid img {
  width: 100%;
}

.detail {
  background: #f4f4f4;
}

.detail div {
  background: white;
}

.illustrate {
  margin: 10px 10px;
}

.appraise-one {
  border-bottom: #f8f8f8 1px solid;
}

.deta-button {
  text-align: center;
  margin-bottom: 70px;
}

.deta-button span {
  padding: 7px 10px;
  margin: 10px 0;
  /* border: #666666 1px solid; */
}

.two img {
  width: 100%;
  display: block;
}

.van-tabs__wrap {
  position: relative;
  padding: 0 20px;
}

.icon {
  position: fixed;
  top: 15px;
  left: 6px;
  z-index: 9999;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.opacity {
  opacity: 0;
  transition: opacity 1s
}


.item {
  margin-right: 20px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.red {
  border: 1px solid red;
}
</style>
